<!--
 * @Author: modefy
 * @Date: 2023-04-27 10:22:22
 * @LastEditors: modefy
 * @LastEditTime: 2023-05-15 17:29:08
 * @Description: Description
-->
<template>
  <div class="modefy-daily">
    <el-button @click="addClick" class="add-btn" :icon="Plus"></el-button>
    <div class="random-mood-container">
      <div
        :class="['list', item.className]"
        v-for="(item, index) in listConfig"
        :key="index"
      >
        <div class="top">{{ item.type }}</div>

        <VueDraggableNext
          :animation="100"
          item-key="id"
          class="list-content"
          tag="div"
          group="site"
          v-model="entertainmentList"
          handle=".item"
          v-if="item.type === '娱乐'"
        >
          <div
            class="item"
            v-for="(item1, index) in entertainmentList"
            :key="item1.id"
          >
            <div class="title">
              <span class="tit">{{ item1.title }}</span>
              <span class="time">
                <span>{{ item1.createTime }}</span>
                <span class="delete" @click="deleteItem(item1)"></span>
              </span>
            </div>

            <div class="text-content">
              <p class="text">
                {{ item1.content }}
              </p>
            </div>
          </div>
        </VueDraggableNext>

        <VueDraggableNext
          :animation="100"
          item-key="id"
          class="list-content"
          tag="div"
          group="site"
          v-model="workList"
          handle=".item"
          v-if="item.type === '工作'"
        >
          <div class="item" v-for="(item1, index) in workList" :key="item1.id">
            <div class="title">
              <span class="tit">{{ item1.title }}</span>
              <span class="time">
                <span>{{ item1.createTime }}</span>
                <span class="delete" @click="deleteItem(item1)"></span>
              </span>
            </div>

            <div class="text-content">
              <p class="text">
                {{ item1.content }}
              </p>
            </div>
          </div>
        </VueDraggableNext>

        <VueDraggableNext
          :animation="100"
          item-key="id"
          class="list-content"
          tag="div"
          group="site"
          v-model="lifeList"
          handle=".item"
          v-if="item.type === '生活'"
        >
          <div class="item" v-for="(item1, index) in lifeList" :key="item1.id">
            <div class="title">
              <span class="tit">{{ item1.title }}</span>
              <span class="time">
                <span>{{ item1.createTime }}</span>
                <span class="delete" @click="deleteItem(item1)"></span>
              </span>
            </div>

            <div class="text-content">
              <p class="text">
                {{ item1.content }}
              </p>
            </div>
          </div>
        </VueDraggableNext>
      </div>
    </div>
  </div>

  <hl-dialog
    :title="'添加记录'"
    :is-show="isShowDialig"
    :width="500"
    :height="380"
    @close="closeDialog"
  >
    <add-daily @success="addSuccess"></add-daily>
  </hl-dialog>
</template>

<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import { ref, reactive } from "vue";
import { VueDraggableNext } from "vue-draggable-next";
import HlDialog from "@/components/common/dialog.vue";
import {
  queryDailyDatas,
  addDailyDatas,
  deleteDailys,
} from "@/service/daily/daily";
import { ElMessage, ElMessageBox } from "element-plus";
import addDaily from "@/components/business/add-daily.vue";

interface listType {
  content: string;
  createTime: string;
  id: number;
  kind: string;
  title: string;
}
const listConfig: any = [
  {
    label: "1",
    className: "blue",
    type: "娱乐",
  },
  {
    label: "2",
    className: "orange",
    type: "工作",
  },
  {
    label: "3",
    className: "green",
    type: "生活",
  },
];
const entertainmentList = ref<listType[]>([]); // 预科
const workList = ref<listType[]>([]);
const lifeList = ref<listType[]>([]);

const isShowDialig = ref(false);

// 发布内容
const form = reactive({
  title: "",
  content: "",
  kind: "",
});
const rules = ref({
  title: [{ required: true, trigger: "blur", message: "标题不能为空" }],
  content: [{ required: true, trigger: "blur", message: "内容不能为空" }],
  kind: [{ required: true, trigger: "blur", message: "请选择分类" }],
});

// 删除内容
const deleteItem = (item) => {
  ElMessageBox.confirm("确定要删除吗，删除后将无法恢复?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      deleteDailys({ id: item.id }).then((res) => {
        getData();
        ElMessage({
          type: "success",
          message: "删除成功",
        });
      });
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};
// 获取表格
const getData = async () => {
  let res = await queryDailyDatas();
  entertainmentList.value = res.data.filter((item) => item.kind === "play");
  workList.value = res.data.filter((item) => item.kind === "work");
  lifeList.value = res.data.filter((item) => item.kind === "life");
};
getData();

// 添加成功回调
const addSuccess = () => {
  isShowDialig.value = false;
  getData();
};

// 点击添加
const addClick = () => {
  isShowDialig.value = true;
};

// 点击关闭
const closeDialog = () => {
  isShowDialig.value = false;
};
</script>

<style lang="scss" scoped>
.modefy-daily {
  width: 100%;
  height: 100%;
  background-color: #fff;
  .daily-content {
    padding-top: 10px;
    width: 30%;
  }
}

.random-mood-container {
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
  padding: 25px;
  padding-top: 40px;
  box-sizing: border-box;
  background-size: 100% 100%;
  // background-color: rgba(244, 174, 88, 1);
  display: flex;
  justify-content: space-between;
  align-items: center;

  .list {
    width: 370px;
    height: 690px;
    box-sizing: border-box;
    overflow: hidden;

    .top {
      width: 100%;
      height: 80px;
      line-height: 80px;
      text-align: center;
      font-size: 19px;
      letter-spacing: 2px;
      color: #fff;
      font-family: Albbpht;
    }

    .list-content {
      width: 100%;
      height: 640px;
      padding: 12px;
      box-sizing: border-box;
      overflow-y: auto;
      overflow-x: hidden;
      padding-bottom: 50px;

      .item {
        width: 100%;
        box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.15);
        border: 1px solid #eee;
        border-radius: 4px;
        cursor: move;

        .title {
          font-size: 17px;
          height: 40px;
          line-height: 23px;
          padding: 10px;
          box-sizing: border-box;
          color: #333;
          font-weight: bold;
          border-bottom: 1px solid #eee;
          display: flex;
          justify-content: space-between;
          font-family: Albbpht;

          .time {
            font-size: 14px;
            margin-top: 2px;
            font-weight: 500;
            color: #ccc;
            font-family: quartzef;
            display: flex;
            align-items: center;

            .delete {
              display: inline-block;
              display: none;
              width: 16px;
              height: 16px;
              margin-left: 10px;
              background-image: url("@/assets/images/delete.png");
              background-size: 100% 100%;
              cursor: pointer;
            }

            .delete:hover {
              background-image: url("@/assets/images/delete-hover.png");
              background-size: 100% 100%;
            }
          }
        }

        .text-content {
          width: 100%;
          padding: 0 13px;
          box-sizing: border-box;

          .text {
            padding: 0 10px 10px 10px;
            font-size: 14px;
            color: #777;
            font-weight: 500;
            line-height: 25px;
            padding-bottom: 40px;
            font-family: Albbpht;
            background-image: repeating-linear-gradient(
              white 0px,
              white 24px,
              teal 25px
            );
          }
        }
      }

      .item:hover {
        .title .delete {
          transition: all 0.5s;
          display: block;
        }
      }
    }

    // 滚动条
    .list-content::-webkit-scrollbar {
      width: 5px;
      height: 6px;
      background-color: #f9f9f9;
    }

    .list-content::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #ededed;
      border-radius: 10px;
    }

    .list-content::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      background-color: skyblue;
      background-image: -webkit-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.2) 75%,
        transparent 75%,
        transparent
      );
    }
  }

  .list-content::-webkit-scrollbar-thumb {
  }

  .list-content::-webkit-scrollbar-track {
  }

  .blue {
    border: 2px solid rgba(11, 207, 207);
    border-radius: 3px;

    .top {
      background-color: rgba(11, 207, 207, 0.7);
    }
  }

  .orange {
    border: 2px solid rgba(253, 162, 4);
    border-radius: 3px;

    .top {
      background-color: rgba(253, 162, 4, 0.7);
    }
  }

  .green {
    border: 2px solid rgba(7, 206, 50);
    border-radius: 3px;

    .top {
      background-color: rgba(7, 206, 50, 0.7);
    }
  }
}

.add-btn {
  margin-top: 20px;
  margin-left: 20px;
}
</style>
